import React from 'react';
import {Image,View, Text,DeviceEventEmitter,TouchableOpacity,StyleSheet,ImageBackground,ScrollView } from 'react-native';
import moment from 'moment'
import navigationhelper from 'src/components/navigationhelper'
import NavBar from 'src/components/navBar'
import Layer from 'src/components/Layer'
import {isIPhoneX} from 'src/util'
import ScrollableTabView from 'react-native-scrollable-tab-view'
import { deviceWidth } from '../../../util';
import {inject,observer} from "mobx-react/native"
import { Flex } from '@ant-design/react-native';
import  userHome from '../../../service/Home/index'

@inject('userAuth')

@observer
export default class myTeamHomePage extends React.Component {

    constructor(props) {
      super(props);

      this.state = {
        dict:{}
      }
    }
   
    componentDidMount=()=>{
      let userId = this.props.navigation.getParam('userId')
      this.getDataDetail(userId)
    }

    middleView =(content,title)=>{
      return(
        <View style={{justifyContent:'center',alignItems:'center'}}>
        <Text style ={styles.upText}>{content?content:0}</Text>
        <Text style ={styles.downText}>{title}</Text>
        </View>
      )
    }

    getDataDetail = (userId) => {
      Layer.showLoading()
      userHome.fetchUserTeamUser({
        token: this.props.userAuth.token,
        users_id:userId,
      }).then((res)=>{
        Layer.hiddenLoading()
        if(res.status == 'success'){
          this.setState({
            dict:res.data
          })
        }
      }).catch((res)=>{
        Layer.hiddenLoading()
      })
      
    }
    render(){

      const {dict} = this.state
     const arr =  Object.keys(dict)
     let stringLevel;
     if(arr.length > 0){
       if(dict.level == 1){
        stringLevel = '普通用户'
       }
       else if(dict.level == 2){
        stringLevel = 'VIP会员'
       }
       else if(dict.level == 3){
        stringLevel = '白金会员'
       }
       else{
        stringLevel = '未认证'
       }
     }
      return(
        <View style={{flex: 1}}>
        <NavBar 
          back={()=>{navigationhelper.goBack() }} 
          title={'用户详情'} 
          leftText={'返回'} 
          barStyle={'dark-content'}
        />
       <ScrollView>
         <View>
         <ImageBackground style={{height:160,width:deviceWidth+36,marginLeft:-18}} resizeMode='stretch'  source={require('src/assets/mine/commonUser.png')}> 
         <View style={{flexDirection:'row',justifyContent:'flex-start',alignItems: 'center',}}>
          <Image 
           defaultSource={require('src/assets/mine/userDefaultAvatar.png')}
          source={{uri:arr.length == 0?'':dict.avatar}} style={{height:42,width:42,borderRadius:21,marginLeft:40,marginTop:40}}></Image>
          <Text style={{fontFamily:'PingFang SC',color:'#fff',marginLeft:10,marginTop:45}}>{arr.length == 0?'':dict.nick_name}</Text>
          <View style={{paddingVertical:5,paddingHorizontal:5,marginLeft:10,marginTop:45,borderRadius:6,backgroundColor:'#fff',justifyContent:'center',alignItems:'center'}}> 
          <Text style={{color:'#A5A8D3',fontSize:12}}>{stringLevel}</Text>
          </View>
          </View>
          <View style={{paddingHorizontal:40,marginTop:25,justifyContent:'space-between',alignItems:'center',flexDirection:'row'}}> 
          <Text style={{color:'#fff',fontSize:10}}>注册时间:{arr.length == 0?'':dict.create_time}</Text>
          <Text style={{color:'#fff',fontSize:10}}>实名时间:{arr.length == 0?'':dict.real_name_time}</Text>
          </View>
          </ImageBackground>

          <View style={[styles.viewStyleTwo,{height:72,justifyContent:'space-around',flexDirection:'row',alignItems:'center'}]}>
          {this.middleView(arr.length == 0?0:dict.fee_count.consume_amount,'消费金额')}
          {this.middleView(arr.length == 0?0:dict.fee_count.repayment_amount,'还款金额')}
          {this.middleView(arr.length == 0?0:dict.fee_count.fee,'总手续费')}
          </View >
          </View>

          <View style={[styles.viewStyleTwo,{alignItems:'center',marginTop:10}]}>
          <View style={{justifyContent:'space-between',marginTop:20,flexDirection:'row'}}>

          <View style={{justifyContent:'center',alignItems:'center'}}>
          <Text style ={{color:'#2E2E2E',fontSize:16,fontWeight:'bold'}}>用户管理</Text>
          </View>
           <TouchableOpacity
            activeOpacity={0.8}
             onPress={()=>{
              navigationhelper.push('MyTeamUserManager',{userId:dict.id})
          }}>

            <View style={{flexDirection:'row',justifyContent:'center',alignItems:'center'}}>
              <Text style ={{color:'#8E8E93',fontSize:12,marginLeft:deviceWidth-200}}>查看详情</Text>
              <Image style={{width:20,height:20}} source={require('src/assets/icon_arrow_grey.png')}></Image>
           </View>
          </TouchableOpacity>
        </View>

          <View style={{marginTop: 20}}>
            <View style={{ flexDirection: 'row', justifyContent: 'space-between', paddingLeft:20,paddingRight:20}}>
                <View style={styles.rectangleViewStyle}>
                    <View>
                      <Text style={{color:'#2E2E2E',fontSize:20}}>{arr.length == 0?'':dict.recommend.child}</Text>  
                      <Text style={{color:'#8E8E93',fontSize:12, marginTop:5}}>用户总数</Text>  
                    </View>
                    <View>
                      <Image style={{width:40,height:40}} source={require('src/assets/icon_user_group.png')}></Image>
                    </View>
                </View>
                <View style={styles.rectangleViewStyle}>
                    <View>
                      <Text style={{color:'#2E2E2E',fontSize:20}}>{arr.length == 0?'':dict.recommend.todayChild}</Text>  
                      <Text style={{color:'#8E8E93',fontSize:12,marginTop:5}}>今日注册</Text>  
                    </View>
                    <View>
                      <Image style={{width:40,height:40}} source={require('src/assets/icon_up_line.png')}></Image>
                    </View>
                </View>
            </View>
          </View>
          <View style={{width:deviceWidth, marginTop:20}}>
            <View style={{ flexDirection: 'row', padding:20, borderBottomWidth: 1,borderBottomColor:'#f5f5f5',alignItems:'center',marginLeft:10, justifyContent: 'space-between'}}>
                <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems:'center' }}>
                  <View><Image style={{ width: 38, height: 38 }} source={require('src/assets/icon_mianfei.png')}></Image></View>
                  <View style={{marginLeft:15}}>
                      <Text style={{fontSize:16, color:'#2E2E2E'}}>免费会员</Text>
                      <Text style={{fontSize:12, color:'#8E8E93', marginTop:5}}>总人数:{arr.length == 0?'0':dict.recommend.indirectLevel1Child +dict.recommend.directLevel1Child}</Text> 
                  </View>  
                </View>
                <View>
                    <Text style={{fontSize:12, color:'#8E8E93'}}>{arr.length == 0?'直接推广:0':'直接推广: '+dict.recommend.directLevel1Child}</Text>
                    <Text style={{fontSize:12, color:'#8E8E93',marginTop:5}}>{arr.length == 0?'间接推广:0':'间接推广: '+dict.recommend.indirectLevel1Child}</Text> 
                </View>      
            </View>
                  
            <View style={{ flexDirection: 'row', padding:20, borderBottomWidth: 1,borderBottomColor:'#f5f5f5',alignItems:'center',marginLeft:10, justifyContent: 'space-between'}}>
                <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems:'center' }}>
                  <View><Image style={{ width: 38, height: 38 }} source={require('src/assets/icon_vip.png')}></Image></View>
                  <View style={{marginLeft:15}}>
                      <Text style={{fontSize:16, color:'#2E2E2E'}}>VIP会员</Text>
                      <Text style={{fontSize:12, color:'#8E8E93', marginTop:5}}>总人数:{arr.length == 0?'0':dict.recommend.directLevel2Child +dict.recommend.directLevel2Child}</Text> 
                  </View>  
                </View>
                <View>
                    <Text style={{fontSize:12, color:'#8E8E93'}}>{arr.length == 0?'直接推广:0':'直接推广: '+dict.recommend.directLevel2Child}</Text>
                    <Text style={{fontSize:12, color:'#8E8E93',marginTop:5}}>{arr.length == 0?'间接推广:0':'间接推广: '+dict.recommend.indirectLevel2Child}</Text> 
                </View>      
            </View>

            <View style={{ flexDirection: 'row', padding:20, borderBottomWidth: 1,borderBottomColor:'#f5f5f5',alignItems:'center',marginLeft:10, justifyContent: 'space-between'}}>
                <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems:'center' }}>
                  <View><Image style={{ width: 38, height: 38 }} source={require('src/assets/icon_baijin.png')}></Image></View>
                  <View style={{marginLeft:15}}>
                      <Text style={{fontSize:16, color:'#2E2E2E'}}>白金会员</Text>
                      <Text style={{fontSize:12, color:'#8E8E93', marginTop:5}}>总人数:{arr.length == 0?'0':dict.recommend.directLevel3Child +dict.recommend.directLevel3Child}</Text> 
                  </View>  
                </View>
                <View>
                    <Text style={{fontSize:12, color:'#8E8E93'}}>{arr.length == 0?'直接推广:0':'直接推广: '+dict.recommend.directLevel3Child}</Text>
                    <Text style={{fontSize:12, color:'#8E8E93',marginTop:5}}>{arr.length == 0?'间接推广:0':'间接推广: '+dict.recommend.indirectLevel3Child}</Text> 
                </View>      
            </View>
                  
            <View style={{ flexDirection: 'row', padding:20, borderBottomWidth: 1,borderBottomColor:'#f5f5f5',alignItems:'center',marginLeft:10, justifyContent: 'space-between'}}>
                <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems:'center' }}>
                  <View><Image style={{ width: 38, height: 38 }} source={require('src/assets/icon_wrz.png')}></Image></View>
                  <View style={{marginLeft:15}}>
                      <Text style={{fontSize:16, color:'#2E2E2E'}}>未认证</Text>
                      <Text style={{fontSize:12, color:'#8E8E93', marginTop:5}}>总人数:{arr.length == 0?'0':dict.recommend.directNotRealName +dict.recommend.indirectNotRealName}</Text> 
                  </View>  
                </View>
                <View>
                    <Text style={{fontSize:12, color:'#8E8E93'}}>{arr.length == 0?'直接推广:0':'直接推广: '+dict.recommend.directNotRealName}</Text>
                    <Text style={{fontSize:12, color:'#8E8E93',marginTop:5}}>{arr.length == 0?'直接推广:0':'直接推广: '+dict.recommend.indirectNotRealName}</Text> 
                </View>      
            </View>    

          </View>      
        </View >
          {/* <View style={[styles.viewStyleThree,{height:72,justifyContent:'center',alignItems:'center'}]}>
          <Text style ={{color:'#378EFB',fontSize:15}}>0.60</Text>
          <Text style ={styles.downText}>还款费率</Text>
          </View > */}

         {/* <Flex  style={{marginTop:200,backgroundColor:'#378EFB',marginLeft:10,marginRight:10,height:50,borderRadius:10,justifyContent:'center',alignItems:'center'}} onPress={()=>{
                 navigationhelper.navigate('MyTeamUserManager')
         }}>
         <Text style={{color:'#fff',fontWeight:'bold',fontSize:16}}>已分享</Text>

          </Flex> */}

        </ScrollView>
        </View>
      ) 
    }

}

const styles = StyleSheet.create({
  viewStyle:{
    marginTop:20,
    borderRadius:10,
    backgroundColor:'#fff',
    marginLeft:10,
    marginRight:10,
  },
  viewStyleTwo:{
    marginLeft:10,
    marginRight:10,
    borderRadius:10,
    backgroundColor:'#fff',
  },
  viewStyleThree:{
    marginLeft:10,
    marginRight:10,
    marginTop:20,
    borderRadius:10,
    backgroundColor:'#fff',
  },
  upText:{
    color:'#2E2E2E',
    fontSize:15,
    },
   downText:{
    color:'#8E8E93',
    fontSize:11,
    marginTop:5,
  },
  rectangleViewStyle:{
    backgroundColor:'#fff',
      flexDirection:'row',
      width:(deviceWidth-60)*0.5,
      justifyContent:'space-between',
       marginLeft:10,
       marginRight:10, 
       paddingHorizontal:10,
       paddingVertical: 20,
       shadowColor: "#8E8E93",
      shadowOffset: {
	     x:0,
	     y:3,
     },
     borderRadius:8,
     shadowOpacity: 0.33,
     shadowRadius: 4.62,
      elevation: 4,
   }

})